<template>
    <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="auto"
    >
        <el-row type="flex" :gutter="10">
            <el-col :span="24">
                <el-form-item label="门店LOGO" prop="logo">
                    <el-upload-image v-model="formData.logo"></el-upload-image>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="区域" prop="area_arr">
                    <el-cascader
                        v-if="renderCascader"
                        ref="cascader"
                        v-model="formData.area_arr"
                        :props="props"
                        clearable
                        @change="onAreaChange"
                        placeholder="请选择区域"
                    ></el-cascader>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="门店名称" prop="store_name">
                    <el-input
                        v-model="formData.store_name"
                        placeholder="请输入门店名称"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="手机号" prop="mobile">
                    <el-input
                        v-model="formData.mobile"
                        placeholder="请输入手机号"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="设备编号" prop="devicekey">
                    <el-input
                        v-model="formData.devicekey"
                        placeholder="请输入设备编号"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="详细地址" prop="address">
                    <el-input
                        v-model="formData.address"
                        placeholder="请输入详细地址(不包含区域中的内容)"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="小程序ID" prop="mini_programs_appid">
                    <el-input
                        v-model="formData.mini_programs_appid"
                        placeholder="请输入"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="小程序密钥" prop="mini_programs_key">
                    <el-input
                        v-model="formData.mini_programs_key"
                        placeholder="请输入"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item
                    label="代码上传密钥"
                    prop="mini_programs_uploadkey"
                >
                    <el-upload-file
                        v-model="formData.mini_programs_uploadkey"
                        accept=".key"
                    ></el-upload-file>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="商户号" prop="merch_id">
                    <el-input
                        v-model="formData.merch_id"
                        placeholder="请输入"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="商户号apiv2秘钥" prop="apiv2key">
                    <el-input
                        v-model="formData.apiv2key"
                        placeholder="请输入"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="商户号apiv3秘钥" prop="apiv3key">
                    <el-input
                        v-model="formData.apiv3key"
                        placeholder="请输入"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="商户号证书序列号" prop="serial_no">
                    <el-input
                        v-model="formData.serial_no"
                        placeholder="请输入"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="商户号证书" prop="api_cert">
                    <el-upload-file
                        v-model="formData.api_cert"
                        accept=".pem"
                    ></el-upload-file>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="商户号证书私钥" prop="api_key">
                    <el-upload-file
                        v-model="formData.api_key"
                        accept=".pem"
                    ></el-upload-file>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="经度" prop="lng">
                    <el-input
                        v-model="formData.lng"
                        readonly
                        placeholder="请点击下方获取经纬度"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="纬度" prop="lat">
                    <el-input
                        v-model="formData.lat"
                        readonly
                        placeholder="请点击下方获取经纬度"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="启用状态" prop="status">
                    <el-switch
                        v-model="formData.status"
                        active-value="1"
                        inactive-value="0"
                    ></el-switch>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-button
                type="success"
                icon="el-icon-location-information"
                @click="getLocation"
                >获取经纬度</el-button
            >
            <el-button type="primary" icon="el-icon-check" @click="onConfirm"
                >完成({{ current + 1 }}/{{ selection.length }})</el-button
            >
            <el-button type="default" icon="el-icon-close" @click="onCancel"
                >取消</el-button
            >
        </el-row>
    </el-form>
</template>

<script>
import { post, get } from "@/assets/js/http.js";

export default {
    name: "shop-edit",
    props: {
        selection: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        selection() {
            this.setFormData();
        }
    },
    mounted() {
        this.setFormData();
    },
    components: {
        "el-upload-image": () => import("@/components/el-upload-image.vue"),
        "el-upload-file": () => import("@/components/el-upload-file.vue")
    },
    data() {
        return {
            renderCascader: false,
            current: 0,
            props: {
                label: "name",
                value: "id",
                lazy: true,
                async lazyLoad(node, resolve) {
                    const { level, value } = node;
                    if (level === 0) {
                        const result = await post({
                            url: "/api/common/getProvinceList",
                            data: {}
                        });
                        resolve(result);
                    } else if (level === 1) {
                        const result = await post({
                            url: "/api/common/getCityList",
                            data: {
                                province_id: value
                            }
                        });
                        resolve(result);
                    } else if (level === 2) {
                        const result = await post({
                            url: "/api/common/getAreaList",
                            data: {
                                city_id: value
                            }
                        });
                        resolve(result);
                    } else if (level === 3) {
                        const result = await post({
                            url: "/api/common/getStreetList",
                            data: {
                                area_id: value
                            }
                        });
                        result.forEach(item => (item.leaf = true));
                        resolve(result);
                    }
                }
            },
            formData: {
                id: "",
                logo: [],
                store_name: "",
                mobile: "",
                devicekey: "",
                address: "",
                lng: "",
                lat: "",
                area_arr: [],
                status: "1",
                province_id: "",
                city_id: "",
                town_id: "",
                street_id: "",
                mini_programs_appid: "",
                mini_programs_key: "",
                mini_programs_uploadkey: [],
                merch_id: "",
                apiv2key: "",
                apiv3key: "",
                serial_no: "",
                api_cert: [],
                api_key: []
            },
            formRules: {
                logo: [
                    {
                        required: true,
                        message: "此项为必填项"
                    }
                ],
                store_name: [
                    {
                        required: true,
                        message: "此项为必填项"
                    }
                ],
                mobile:  [
								    {
								        required: true,
								        message: "此项为必填项"
								    },
								    {
								        pattern:/^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/,
								        message: "手机号码格式错误"
								    }
								],
                devicekey: {
                    required: true,
                    message: "此项为必填项"
                },
                address: {
                    required: true,
                    message: "此项为必填项"
                },
                lng: {
                    required: true,
                    message: "此项为必填项"
                },
                lat: {
                    required: true,
                    message: "此项为必填项"
                },
                area_arr: {
                    required: true,
                    message: "此项为必填项"
                },
                mini_programs_appid: {
                    required: true,
                    message: "此项为必填项"
                },
                mini_programs_key: {
                    required: true,
                    message: "此项为必填项"
                },
                mini_programs_uploadkey: {
                    required: true,
                    message: "此项为必填项"
                },
                merch_id: {
                    required: true,
                    message: "此项为必填项"
                },
                apiv2key: {
                    required: true,
                    message: "此项为必填项"
                },
                apiv3key: {
                    required: true,
                    message: "此项为必填项"
                },
                serial_no: {
                    required: true,
                    message: "此项为必填项"
                },
                api_cert: {
                    required: true,
                    message: "此项为必填项"
                },
                api_key: {
                    required: true,
                    message: "此项为必填项"
                }
            },
            address: ""
        };
    },
    methods: {
        async getLocation() {
            if (this.address) {
                if (this.formData.address) {
                    const result = await get({
                        url: "/api/common/getLocation",
                        params: {
                            address: this.address + this.formData.address
                        }
                    });
                    this.formData.lng = result[0];
                    this.formData.lat = result[1];
                    this.$message.success("经纬度获取成功");
                } else {
                    this.$message.error("请先输入详细地址");
                }
            } else {
                this.$message.error("当前经纬度已获取");
            }
        },
        onAreaChange() {
            const checkedNodes = this.$refs.cascader.getCheckedNodes();
            this.address = checkedNodes[0].pathLabels.join("");
        },
        async setFormData() {
            if (this.selection.length > 0) {
                const data = this.selection[this.current];
                const result = await get({
                    url: "/admin/store.store/edit",
                    params: {
                        id: data.id
                    }
                });
                const row = result.row;
                console.log(row);
                this.formData.id = row.id;
                this.formData.logo = [{ url: row.logo }];
                this.formData.store_name = row.store_name;
                this.formData.mobile = row.mobile;
                this.formData.devicekey = row.devicekey;
                this.formData.address = row.address;
                this.formData.lng = row.lng;
                this.formData.lat = row.lat;
                this.formData.status = row.status;
                this.formData.area_arr = [
                    row.province_id,
                    row.city_id,
                    row.town_id,
                    row.street_id
                ];
                this.formData.mini_programs_appid = row.mini_programs_appid;
                this.formData.mini_programs_key = row.mini_programs_key;
                const mini_programs_uploadkey_split = row.mini_programs_uploadkey.split(
                    "/"
                );
                const mini_programs_uploadkey_filename =
                    mini_programs_uploadkey_split[
                        mini_programs_uploadkey_split.length - 1
                    ];
                this.formData.mini_programs_uploadkey = [
                    {
                        url: row.mini_programs_uploadkey,
                        name: mini_programs_uploadkey_filename
                    }
                ];
                this.formData.merch_id = row.merch_id;
                this.formData.apiv2key = row.apiv2key;
                this.formData.apiv3key = row.apiv3key;
                this.formData.serial_no = row.serial_no;
                const api_cert_split = row.api_cert.split("/");
                const api_cert_filename =
                    api_cert_split[api_cert_split.length - 1];
                this.formData.api_cert = [
                    {
                        url: row.api_cert,
                        name: api_cert_filename
                    }
                ];
                const api_key_split = row.api_key.split("/");
                const api_key_filename =
                    api_key_split[api_key_split.length - 1];
                this.formData.api_key = [
                    {
                        url: row.api_key,
                        name: api_key_filename
                    }
                ];
                this.$nextTick(() => {
                    this.renderCascader = true;
                });
            }
        },
        onConfirm() {
            this.$refs.formRef.validate(async isValid => {
                if (isValid) {
                    const formData = JSON.parse(JSON.stringify(this.formData));
                    if (formData.logo.length > 0) {
                        if (formData.logo[0].response) {
                            formData.logo =
                                "//zdcloud.zxkjnc.com" +
                                formData.logo[0].response.data.file.url;
                        } else {
                            formData.logo = formData.logo[0].url;
                        }
                    } else {
                        formData.logo = "";
                    }
                    if (formData.mini_programs_uploadkey.length > 0) {
                        if (formData.mini_programs_uploadkey[0].response) {
                            formData.mini_programs_uploadkey =
                                "//zdcloud.zxkjnc.com" +
                                formData.mini_programs_uploadkey[0].response
                                    .data.file.url;
                        } else {
                            formData.mini_programs_uploadkey =
                                formData.mini_programs_uploadkey[0].url;
                        }
                    } else {
                        formData.mini_programs_uploadkey = "";
                    }
                    if (formData.api_cert.length > 0) {
                        if (formData.api_cert[0].response) {
                            formData.api_cert =
                                "//zdcloud.zxkjnc.com" +
                                formData.api_cert[0].response.data.file.url;
                        } else {
                            formData.api_cert = formData.api_cert[0].url;
                        }
                    } else {
                        formData.api_cert = "";
                    }
                    if (formData.api_key.length > 0) {
                        if (formData.api_key[0].response) {
                            formData.api_key =
                                "//zdcloud.zxkjnc.com" +
                                formData.api_key[0].response.data.file.url;
                        } else {
                            formData.api_key = formData.api_key[0].url;
                        }
                    } else {
                        formData.api_key = "";
                    }
                    formData.province_id = formData.area_arr[0];
                    formData.city_id = formData.area_arr[1];
                    formData.town_id = formData.area_arr[2];
                    formData.street_id = formData.area_arr[3] || "";
                    delete formData.area_arr;
                    await post({
                        url: "/admin/store.store/edit",
                        data: formData,
                        loading: true,
                        successTip: true
                    });
                    if (this.current === this.selection.length - 1) {
                        this.$emit("update");
                        this.renderCascader = false;
                        this.current = 0;
                        this.$parent.$emit("update:visible", false);
                        this.$refs.formRef.resetFields();
                    } else {
                        this.current += 1;
                        this.renderCascader = false;
                        this.setFormData();
                    }
                }
            });
        },
        onCancel() {
            if (this.current > 0) {
                this.$emit("update");
            }
            this.renderCascader = false;
            this.current = 0;
            this.$parent.$emit("update:visible", false);
            this.$refs.formRef.resetFields();
        }
    }
};
</script>

